<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Raphaël Demo</title>
<link rel="stylesheet" href="../css/style.css">
<script src="../script/libs/modernizr-2.0.6.min.js"></script>
<style>
#canvas {
    background-color: #eee;
    height: 20em;
}
</style>
</head>
<body>
  <div id="container">
    <header>
      <hgroup>
        <h1>Raphaël Demo</h1>
        <h2 id="version">Unknown Version</h2>
      </hgroup>

      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="main" role="main">
      <p>God helps those who help themselves.</p>
      <div id="canvas"></div>
    </div>
    <footer>
      <p>copyright &copy; 2011</p>
    </footer>
  </div> <!--! end of #container -->


  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="../script/libs/jquery-1.6.2.js"><\/script>')</script>
  <script src="../script/libs/raphael.js"></script>

  <!-- scripts concatenated and minified via ant build script-->
  <script defer src="../script/plugins.js"></script>
  <!-- end scripts-->

  <script>
    $(document).ready(function() {
        // version
        var version = $.fn.jquery;
        $('#version').html('jQuery: ' + version);

        // raphael
         // Creates canvas 320 × 200 at 10, 50
        var paper = Raphael(10, 50, 320, 200);

        // Creates circle at x = 50, y = 40, with radius 10
        var circle = paper.circle(50, 40, 10);
        // Sets the fill attribute of the circle to red (#f00)
        circle.attr("fill", "#f00");

        // Sets the stroke attribute of the circle to white
        circle.attr("stroke", "#fff");
    });
  </script>
</body>
</html>